class Page {
    constructor(el, options = {}) {
        this.el = document.querySelector(el)
        this.options = options
        this.init()
    }
    init() {
        this.fuTag()
        this.createTag()
        this.bindEvent()
    }
    bindEvent() {
        this.el.onclick = (evt) => {
            let e = evt || window.event
            let target = e.target || e.srcElement
            console.log(target.nodeName);
            console.log(target.innerText);
            console.log(this.options.pageTag.first);
            if(target.nodeName === 'P') {
                switch (target.innerText) {
                    case this.options.pageTag.first:
                        this.options.pageInfo.pageNum = 1
                        break;
                    case this.options.pageTag.prev:
                        if (this.options.pageInfo.pageNum == 1) return
                        this.options.pageInfo.pageNum--
                        break;
                    case this.options.pageTag.next:
                        if (this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) return
                        this.options.pageInfo.pageNum++
                        break;
                    case this.options.pageTag.last:
                        this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                        break;
                    default:
                        if (parseInt(target.innerHTML) > 0) {
                            this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                        }
                        break;
                }
                this.createTag()
            }
        }
    }
    fuTag() { 
        this.el.style.display = 'flex'
        this.el.style.justifyContent = 'center'
        this.el.style.alignItems =  'center'
    }
    createP(tagName,content,fuObj) {
        let pObj = document.createElement(tagName)
        pObj.innerText = content
        pObj.style.border = '1px solid black'
        pObj.style.margin = '0 5px'
        pObj.style.padding = '0 5px'
        pObj.style.display = 'inline-block'
        if(content === this.options.pageInfo.pageNum) pObj.style.background = 'orange  '
        fuObj.appendChild(pObj)
    }
    createTag() {
        this.el.innerHTML = ''
        // 获取 第二个实参中的pageTag对象
        let pageTag = this.options.pageTag
        // 遍历
        for (let key in pageTag) {
            this.createP('p',pageTag[key],this.el)
        }
        this.createNum()
    }
    createNum(){
        let tag3Obj = this.el.querySelector('p:nth-child(3)')
        tag3Obj.style.border = 'none'
        tag3Obj.style.margin = 0
        tag3Obj.style.padding = 0
        let pageNum = this.options.pageInfo.pageNum
        this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
        let totalPage = this.options.pageInfo.totalPage
        if (totalPage < 7) {
            for (let i = 1; i <= totalPage; i++) this.createP('p', i, tag3Obj)
        } else if (pageNum < 5) {
            for (let i = 1; i <= 5; i++) this.createP('p', i, tag3Obj)
            this.createP('p','...',tag3Obj)
            this.createP('p',totalPage - 1,tag3Obj)
            this.createP('p', totalPage,tag3Obj)
        } else if (pageNum == 5) {
            for (let i = 1; i <= 7; i++) this.createP('p', i, tag3Obj)
            this.createP('p','...',tag3Obj)
            this.createP('p',totalPage - 1,tag3Obj)
            this.createP('p',totalPage,tag3Obj)
        } else if (pageNum > 5 && pageNum < totalPage - 4) {
            for (let i = 1; i <= 2; i++) this.createP('p', i, tag3Obj)
            this.createP('p','...',tag3Obj)
            this.createP('p',pageNum - 2,tag3Obj)
            this.createP('p',pageNum - 1,tag3Obj)
            this.createP('p',pageNum,tag3Obj)
            this.createP('p',pageNum + 1,tag3Obj)
            this.createP('p',pageNum + 2,tag3Obj)
            this.createP('p','...',tag3Obj)
            this.createP('p',totalPage - 1,tag3Obj)
            this.createP('p',totalPage,tag3Obj)
        } else if (pageNum >= totalPage - 4) {
            for (let i = 1; i <= 2; i++) this.createP('p', i, tag3Obj)
            this.createP('p','...',tag3Obj)
            for (let i = totalPage - 4; i <= totalPage; i++) this.createP('p', i, tag3Obj)
        }
    }
}
export default Page